<script setup lang="ts">
import {computed, onMounted, ref} from 'vue'
import {getRequest, postPutRequest} from "@/api/data.ts";
import {FormInst, useMessage, SelectOption} from 'naive-ui';

const message = useMessage()

//短信设置
const sMSOptions = ref<SelectOption[]>([
  {
    label: '阿里云短信',
    value: 'aliyun'
  }, {
    label: '腾讯云短信',
    value: 'tencent'
  }
]);
const loadings = ref<boolean>(false);
const btnLoading = ref<boolean>(false);
const sms_form = ref<FormInst | null>(null);
const smsForm = ref({
  type: 'aliyun',
  enable: 0,
  app_id_key: null,
  secret_id: null,
  secret_key: null,
});
const smsFormRules = computed(() => {
  return {
    type: {
      type: 'string',
      required: true,
      trigger: 'change',
      message: '请选择短信渠道'
    },
    enable: {
      type: 'number',
      required: true,
      trigger: ['blur', 'input'],
      message: '请选择短信渠道'
    },

    app_id_key: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请填写短信平台APP_ID'
    },
    secret_id: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请填写短信平台SECRET_ID'
    },
    secret_key: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请填写短信平台SECRET_KEY'
    }
  }
})


//切换短信渠道
const changeSMSKey = (value: string) => {
  smsForm.value.type = value;
}

const handelSave = (e: MouseEvent) => {
  e.preventDefault();
  btnLoading.value = true;
  postPutRequest('conf/save_sms', smsForm.value).then((result: ResponseResult) => {
    if (result.code === 200) {
      message.success(result.message, {
        duration: 1500,
        onLeave() {
          btnLoading.value = false;
        }
      })
    } else {
      message.error(result.message);
      btnLoading.value = false;
    }
  })
}
//获取配置参数
const getSettings = async () => {
  await getRequest('conf/get_settings', {type: 'sms'}, true).then((result: ResponseResult) => {
    const {data} = result;
    const {sms} = JSON.parse(data);
    if (sms) {
      const data_key = Object.keys(sms)
      smsForm.value = {
        type: data_key[0] ?? 'aliyun',
        enable: sms[data_key[0]]['enable'] ?? 0,
        app_id_key: sms[data_key[0]]['app_id_key'] ?? null,
        secret_id: sms[data_key[0]]['secret_id'] ?? null,
        secret_key: sms[data_key[0]]['secret_key'] ?? null,
      }
    }
    loadings.value = false;
  })
}

onMounted(() => {
  loadings.value = true;
  getSettings();
})
</script>

<template>
  <n-form
      ref="sms_form"
      :model="smsForm"
      :rules="smsFormRules"
      require-mark-placement="left"
      label-placement="left" :label-width="110">
    <n-spin size="medium" v-model:show="loadings">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="6" label="短信渠道" path="type">
          <n-select v-model:value="smsForm.type" :options="sMSOptions" style="width: 150px;"
                    @update:value="changeSMSKey" disabled/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="开启状态" path="enable">
          <n-radio-group v-model:value="smsForm.enable" name="enable">
            <n-space>
              <n-radio :value="0" key="0" label="关闭"/>
              <n-radio :value="1" key="1" label="开启"/>
            </n-space>
          </n-radio-group>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" :label="smsForm.type=='tencent'?'APP_ID':'APP_KEY'" path="app_id_key">
          <div style="width: 100%">
            <n-input v-model:value="smsForm.app_id_key"
                     :placeholder="smsForm.type=='tencent'?'请输入短信平台APP_ID':'请输入短信平台APP_KEY'"
                     clearable/>
            <p class="tips_p">短信渠道选择腾讯云短信是APP_KEY则是APP_ID</p>
          </div>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24" v-if="smsForm.type=='tencent'">
        <n-form-item-gi :span="8" label="SECRET_ID" path="secret_id">
          <n-input v-model:value="smsForm.secret_id" placeholder="请输入短信平台SECRET_ID" clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="SECRET_KEY" path="secret_key">
          <n-input v-model:value="smsForm.secret_key" placeholder="请输入短信平台SECRET_KEY" clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="&nbsp;" style="margin-top: 15px;">
          <n-button type="primary" :loading="btnLoading" @click="handelSave">保存短信设置</n-button>
        </n-form-item-gi>
      </n-grid>
    </n-spin>
  </n-form>
</template>

<style scoped lang="scss">

</style>